<template>
  <zm-view background="#ffffff">
    <view class="p-24 solid-top-2">
      <text class="font-30 font-700">{{ filmName }}</text>
      <view class="textarea-wrap">
        <textarea
          v-model="form.content"
          auto-height
          class="textarea"
          maxlength="300"
          placeholder-style="color:#999;font-size: 26rpx;font-weight: 400;"
          placeholder="你可以分享喜欢的角色、印象深刻的片段、整体的观影感受，可以试试添加小标题哟~"
          @input="handleInput"
        />
        <text class="text-count">{{ form.content.length }}/300</text>
      </view>
      <view class="mt-50">
        <zm-button type="primary" size="large" round height="100rpx" :disabled="!form.content" @click="handleSubmit">{{ form.reviewId ? "编辑" : "发布" }}评论</zm-button>
      </view>
    </view>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import base64 from "@/utils/encode/base64"
export default {
  mixins: [page],
  data() {
    return {
      isFocus: false,
      filmName: "",
      form: {
        filmId: "",
        content: ""
      }
    }
  },
  onLoad(options) {
    this.filmName = options.filmName
    this.form.filmId = options.filmId

    if (options.reviewId) {
      const data = uni.$getCache("review-edit")
      this.form.content = data.content
      this.form.reviewId = options.reviewId
    }
  },
  onShow() {
    setTimeout(() => {
      this.isFocus = true
    }, 1000)
  },
  methods: {
    // 限制移动端复制超过规定长度限制
    handleInput() {
      if (this.form.content.length > 300) {
        this.$toast("已超过300字符限制")
        this.form.content = this.form.content.slice(0, 300)
      }
    },
    handleSubmit() {
      const form = uni.$clone(this.form)
      form.content = base64.encode(form.content)
      if (form.reviewId) {
        uni.$api.film.updateReview(form).then(() => {
          uni.$setCache("review-submit-tips", "影评编辑成功啦~")
          setTimeout(() => {
            uni.navigateBack()
          }, 200)
        })
        return
      }
      uni.$api.film.reviewFilm(form).then(() => {
        uni.$setCache("review-submit-tips", "影评发布成功啦~")
        uni.navigateBack()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.textarea-wrap {
  padding: 20rpx;
  margin-top: 20rpx;
  position: relative;
  border-radius: 16rpx;
  background-color: #f4f6f7;
  .textarea {
    width: 100%;
    font-size: 26rpx;
    min-height: 280rpx;
    margin-bottom: 20rpx;
  }
  .text-count {
    z-index: 10;
    right: 24rpx;
    bottom: 20rpx;
    color: #999999;
    font-size: 20rpx;
    position: absolute;
  }
}
::v-deep .textarea-placeholder {
  color: #999999;
  font-size: 26rpx;
}
</style>
